<template>
	<view class="content">
		<view class="card p15">
			<view class="flex">
				<image class="top-icon" src="../../static/icon/shijian1.png" mode="aspectFill"></image>
				<view class="f14"><text style="color:#656565 ;">时间：</text><text>{{desc.uptime}}</text></view>
			</view>
			<view class="line">
			</view>
			<view class="flex">
				<image class="top-icon" src="../../static/icon/dizhi1.png" mode="aspectFill"></image>
				<view class="f14 row1"><text style="color:#656565 ;">地点：</text><text>{{desc.address}}</text></view>
			</view>
			<view class="line">
			</view>
			<view class="flex">
				<image class="top-icon" src="../../static/icon/x.jpg" mode="aspectFill"></image>
				<view class="f14 row1"><text style="color:#656565 ;">类型：</text><text>{{desc.qtype}}</text></view>
			</view>
			<view class="line">
			</view>
			<view class="flex">
				<image class="top-icon" src="../../static/icon/s.png" mode="aspectFill"></image>
				<view class="f14 row1"><text style="color:#656565 ;">状态：</text><text>{{desc.qstatus}}</text></view>
			</view>
		</view>
		<view class="card p15" style="margin-top: 20rpx;">
			<view class="flex">
				<map class="map" :latitude="map.latitude" :longitude="map.longitude" :markers="covers"
					:scale="map.scale"></map>
			</view>
		</view>
		<view class="card p15" style="margin-top: 20rpx;">
			<view  style="margin-bottom: 20rpx;">
				<view class="f14 bold" style="margin-bottom: 20rpx;"><text>问题详情：</text></view>
				<view class="f14" style="padding-left: 20rpx;"><text>{{desc.desc}}</text></view>
			</view>
			<view class="f14 bold"><text >问题详情图片：</text></view>
			<image v-for="(item,index) in desc.images" @click="previewImage(helper.host+item)"
				style="margin-top: 20rpx;border-radius: 20rpx;width: 100%;" :key="index" class="weizhicon" :src="helper.host+item"
				mode="aspectFill"></image>
				<view class="f14 bold" v-if="desc.video"><text >问题视频：</text></view>
				<video :src="desc.video" v-if="desc.video" style="width: 100%;" controls></video>
		</view>
	</view>
</template>
<script>
	import QQMapWX from '../../libs/qqmap-wx-jssdk/qqmap-wx-jssdk.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import aipreview from '@/components/ai-preview/ai-preview.vue';
	import myIssue from '@/components/myIssue.vue';
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		comments: {
			aipreview
		},
		data() {
			return {
				userinfo: [],
				qqmapsdk: {},
				map: {
					longitude: '116.4',
					latitude: '39.9',
					polyline: [{
						points: [],
						color: '#0055ff',
						width: 55,
						dottedLine: true,
						borderWidth: 20,
						colorList: true,
					}, {
						points: [],
						color: '#ff0000',
						width: 55,
						dottedLine: true,
						borderWidth: 20,
						colorList: true,
					}],
					scale: 16
				},
				covers: [],
				helper: [],
				address: '',
				desc: [],
				id: 0
			}
		},
		onLoad(op) {
			this.id = op.id
			this.helper = helper;
			this.getUserInfo();
			var _this = this;
			// 设置地图信息
			api.question({
				id: _this.id
			}).then(res => {
				console.log('res', res)
				_this.desc = res.data;
				_this.map = {
					latitude: _this.desc.latitude,
					longitude: _this.desc.longitude,
					scale: 16
				}
				_this.covers[0] = {
					latitude: _this.desc.latitude,
					longitude: _this.desc.longitude,
					iconPath: '../../static/r.png'
				};
			});
		},
		methods: {
			previewImage(url) {
				wx.previewImage({
					current: url,
					urls: [url] //一个数组，可以查看多张图
				});
			},
			async getUserInfo() {
				let res = await api.getUserInfo();
				this.userinfo = res.data;
			},
		}
	}
</script>

<style scoped>
	uni-map {
		width: 100%;
		height: 600rpx;
	}

	.p15 {
		padding: 30rpx;
	}

	.card {
		background-color: #ffffff;
	}

	.top-icon {
		height: 42rpx;
		width: 42rpx;
		margin-right: 12rpx;
	}

	.camera {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -36rpx;
		margin-left: -34rpx;
	}

	.upload {
		width: 110rpx;
		height: 110rpx;
		border: 2rpx solid #989898;
		border-radius: 8rpx;
		text-align: center;
		position: relative;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;

	}

	.list-box>view {
		margin: 6rpx;
	}

	.selde {
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		height: 54rpx;
		line-height: 50rpx;
		border: 1px solid #4DA9EC;
		color: #FFFFFF;
		background-color: #4DA9EC;
	}

	/* 未选择 */
	.noselde {
		border: 1px solid #959595;
		background: #FFFFFF;
		color: #959595;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		height: 54rpx;
		line-height: 50rpx;
	}

	.valueList {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
		margin: 20rpx 0;
	}

	.report {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #4DA9EC;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>
